<template>
	<u-modal v-model="show" title="全部分类" :show-confirm-button='false' :show-title='false'>
		<view class="">
			<view class="title_box">
				全部分类
				<u-icon @click="$emit('update:show',false)" class="icon_close" name='close-circle' color="#FF365D" size="36"></u-icon>
			</view>
			<u-row gutter="16" class="type_modal_box">
				<u-col v-if="item.id!==-1" span="3" v-for="(item,index) in list" :key='index'
					@click='handClose(item.id,index)'>
					<view class="item">
						<!-- <u-image class="icon" :src="item.imgUrl" width="110rpx" height="110rpx"></u-image> -->
						<view class="title">
							{{item.typeName}}
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
	</u-modal>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => [],
				required: true
			},
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handClose(id, index) {
				this.$emit('handClose', id, index)
				// this.$emit('update:show', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title_box {
		text-align: center;
		margin-top: 20rpx;
		position: relative;
		font-weight: 600;
		color: #000000;
		font-size: 30rpx;

		.icon_close {
			position: absolute;
			right: 26rpx;
			top: 50%;
			transform: translate(0, -50%);
		}
	}

	.type_modal_box {
		padding: 30rpx;
		padding-bottom: rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 40rpx;

			.title {
				color: #101010;
				font-size: 26rpx;
				@include ellipsisMultiline(1);
			}

			.icon {
				width: 110rpx;
				height: 110rpx;
				margin-bottom: 14rpx;

			}
		}
	}
</style>
